<template>
  <el-descriptions
    class="margin-top"
    title="餐厅信息"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <el-button type="primary" @click="open">修改信息</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          餐厅名称
        </div>
      </template>
      {{ info.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          联系电话
        </div>
      </template>
      {{ info.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          地址
        </div>
      </template>
      {{ info.address }}
    </el-descriptions-item>
  </el-descriptions>

  <el-dialog
    v-model="dialogVisible"
    title="修改信息"
    width="500"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="餐厅名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="餐厅电话">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="餐厅地址">
        <el-input v-model="form.address" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
const info = reactive({
  name: "",
  phone: "",
  address: "",
});

const form = reactive({
  name: "",
  phone: "",
  address: "",
});

const init = () => {
  const local = JSON.parse(localStorage.getItem("info"));
  console.log(111, info);
  if (local) {
    info.name = local.name;
    info.phone = local.phone;
    info.address = local.address;
    form.name = local.name;
    form.phone = local.phone;
    form.address = local.address;
  } else {
    info.name = "平安保险产品业务服务平台";
    info.phone = "13333333333";
    info.address = "北京市朝阳区天安门广场";
    form.name = "平安保险产品业务服务平台";
    form.phone = "13333333333";
    form.address = "北京市朝阳区天安门广场";
  }
};
init();
const dialogVisible = ref(false);

const open = () => {
  dialogVisible.value = true;
};

const submit = () => {
  localStorage.setItem("info", JSON.stringify(form));
  dialogVisible.value = false;
  init();
};
</script>

<style lang="less" scoped>
</style>